<template>
	<view class="container">
		<u-top-tips ref="uTips"></u-top-tips>
		<view class="header">
			<input type="text" placeholder="请输入课程名" v-model="title" />
			<view class="look" hover-class="touch" hover-start-time="0" hover-stay-time="300" @tap="look">预览</view>
			<view class="push" hover-class="touch" hover-start-time="0" hover-stay-time="300" @tap="push">发布</view>
		</view>
		<view class="column">
			<textarea placeholder="请输入课程详情" v-model="content" />
			<view class="uUpload" hover-class="touch" hover-start-time="0" hover-stay-time="300" @tap="uUpload">
				<u-icon v-if="!bannerUrl" name="photo" size="60"></u-icon>
				<text v-if="!bannerUrl" style="margin-top: 30rpx;">点击上传封面图片</text>
				<view class="banner" v-if="bannerUrl"><ImageLoad :src="bannerUrl" borderRadius="10" /></view>
			</view>
		</view>
		<view class="tagTitle">选择标签</view>
		<u-checkbox-group class="tags">
			<u-checkbox v-model="item.checked" active-color="#FED46B" v-for="(item, index) in courseTag" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
		</u-checkbox-group>
		<view class="tagTitle">
			其他标签
			<input type="text" placeholder="输入..." v-model="otherTag" />
		</view>

		<view class="toolbar" @tap="format">
			<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont" style="font-weight: bold;" data-name="header" :data-value="1">标</view>
			<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></view>
			<view class="mark"></view>
			<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi" data-name="align" data-value="center"></view>
			<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi" data-name="align" data-value="right"></view>
			<view class="mark"></view>
			<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie" data-name="list" data-value="ordered"></view>
			<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie" data-name="list" data-value="bullet"></view>
			<view class="mark"></view>
			<view class="iconfont icon-charutupian" @tap="insertImage"></view>

			<view class="mark"></view>
			<view class="iconfont icon-undo" @tap="undo"></view>
			<view class="iconfont icon-redo" @tap="redo"></view>
		</view>
		<editor
			id="editor"
			class="ql-container"
			placeholder="开始输入..."
			showImgSize
			showImgToolbar
			showImgResize
			@statuschange="onStatusChange"
			:read-only="false"
			@ready="onEditorReady"
			@input="input"
		></editor>
	</view>
</template>

<script>
export default {
	data() {
		return {
			formats: {},
			bannerUrl: '',
			title: '',
			content: '',
			courseTags: ['思维', '阅读', '演讲', '记忆力', '国学'],
			courseTag: [],
			otherTag: '',
			editorCtx: ''
		}
	},
	onLoad() {
		const detail = uni.getStorageSync('courseEditor')
		if (!detail) {
			uni.setStorageSync('courseEditor', {})
		}
		this.bannerUrl = detail.bannerUrl
		this.title = detail.title
		this.content = detail.content
		this.otherTag = detail.otherTag
		this.courseTags.map(item => {
			let checked = false
			if (detail.tags) {
				if (detail.tags.indexOf(item) > -1) {
					checked = true
				}
			}
			this.courseTag.push({
				name: item,
				checked: checked
			})
		})
	},
	watch: {
		title: function(title) {
			const editor = uni.getStorageSync('courseEditor')
			editor.title = title
			uni.setStorageSync('courseEditor', editor)
		},
		content: function(content) {
			const editor = uni.getStorageSync('courseEditor')
			editor.content = content
			uni.setStorageSync('courseEditor', editor)
		},
		bannerUrl: function(bannerUrl) {
			const editor = uni.getStorageSync('courseEditor')
			editor.bannerUrl = bannerUrl
			uni.setStorageSync('courseEditor', editor)
		},
		otherTag: function(otherTag) {
			const editor = uni.getStorageSync('courseEditor')
			editor.otherTag = otherTag
			uni.setStorageSync('courseEditor', editor)
		},
		courseTag: {
			handler: function(courseTag) {
				const editor = uni.getStorageSync('courseEditor')
				const tags = []
				courseTag.filter(item => {
					if (item.checked) tags.push(item.name)
				})
				editor.tags = tags
				uni.setStorageSync('courseEditor', editor)
			},
			deep: true
		}
	},
	methods: {
		uUpload: async function() {
			const data = await this.chooseImage()
			this.bannerUrl = data
		},

		onEditorReady() {
			uni.createSelectorQuery()
				.select('#editor')
				.context(res => {
					this.editorCtx = res.context
					const detail = uni.getStorageSync('courseEditor')
					if (detail.html) {
						this.editorCtx.setContents({
							html: detail.html
						})
					}
				})
				.exec()
		},
		input(e) {
			const editor = uni.getStorageSync('courseEditor')
			editor.html = e.detail.html
			uni.setStorageSync('courseEditor', editor)
		},
		undo() {
			this.editorCtx.undo()
		},
		redo() {
			this.editorCtx.redo()
		},
		format(e) {
			let { name, value } = e.target.dataset
			if (!name) return
			this.editorCtx.format(name, value)
		},
		onStatusChange(e) {
			const formats = e.detail
			this.formats = formats
		},
		insertImage: async function() {
			const data = await this.chooseImage()
			this.editorCtx.insertImage({
				src: data,
				alt: '图像'
			})
		},
		filter: function() {
			return new Promise((resolve, reject) => {
				if (!this.title) {
					this.$refs.uTips.show({
						title: '请输入课程名',
						type: 'warning',
						duration: '2000'
					})
					return
				}
				if (!this.content) {
					this.$refs.uTips.show({
						title: '请输入课程详情',
						type: 'warning',
						duration: '2000'
					})
					return
				}
				if (!this.bannerUrl) {
					this.$refs.uTips.show({
						title: '请上传封面图片',
						type: 'warning',
						duration: '2000'
					})
					return
				}
				resolve()
			})
		},
		look: async function() {
			await this.filter()
			const item = Object.assign(
				{
					coverUrl: this.bannerUrl,
					name: this.title,
					contentType: 'dom',
					type: 'test',
					score: 4,
					summary: this.content
				},
				this.merchant
			)
			item.merchantName = item.name
			item.name = this.title
			this.editorCtx.getContents({
				success: res => {
					item.dom = res.html
					this.$Router.push({ name: 'courseDetail', query: { item: JSON.stringify(item) } })
				}
			})
		},
		push: async function() {
			await this.filter()
			const tags = []
			this.courseTag.filter(item => {
				if (item.checked) tags.push(item.name)
			})
			if (this.otherTag) tags.push(this.otherTag)
			const item = {
				deviceUuid: this.deviceUuid,
				coverUrl: this.bannerUrl,
				summary: this.content,
				name: this.title,
				tags: tags
			}
			this.editorCtx.getContents({
				success: async res => {
					item.content = res.html
					const [data, err] = await this.awaitWarp(this.$post(this.api.addCourse, item))
					if (err) {
						this.$refs.uTips.show({
							title: '网络请求失败',
							type: 'warning',
							duration: '2000'
						})
						return
					}
					if (data.errorCode === 'hasIllegalContent') {
						this.$refs.uTips.show({
							title: '非法内容',
							type: 'error',
							duration: '2000'
						})
						return
					}
					this.$refs.uTips.show({
						title: '发布成功',
						type: 'success',
						duration: '2000'
					})
					uni.setStorageSync('courseEditor', {})
					setTimeout(() => {
						getApp().globalData.courseLoadData = true
						this.$Router.pushTab({ name: 'more' })
					}, 2000)
				}
			})
		}
	}
}
</script>

<style scoped lang="stylus">
@import '../../common/css/editor-icon.css'

.container
	width 100vw
	height auto
	min-height 100vh
	display flex
	flex-direction column
	background white
	.header
		display flex
		height 8vh
		align-items center
		margin-left 20rpx
		input
			height 8vh
			padding-left 20rpx
			font-size 40rpx
			border-bottom 2rpx solid #DFE1E5
			width 450rpx
			box-sizing border-box
		.push
			position fixed
			right 20rpx
			width 100rpx
			height 60rpx
			font-size 30rpx
			background #FB864E
			border-radius 20rpx
			line-height 60rpx
			text-align center
			color white
			transition all 0.3s
		.look
			position fixed
			right 140rpx
			width 100rpx
			height 60rpx
			font-size 30rpx
			background orange
			border-radius 20rpx
			line-height 60rpx
			text-align center
			color white
			transition all 0.3s
	.column
		margin-left 20rpx
		height 200rpx
		display flex
		margin-top 20rpx
		textarea
			width 345rpx
			height 200rpx
			border 2rpx solid #DFE1E5
			border-radius 20rpx
			box-sizing border-box
			padding 15rpx
		.uUpload
			width 345rpx
			height 200rpx
			margin-left 20rpx
			background #F4F5F6
			border-radius 20rpx
			display flex
			flex-direction column
			justify-content center
			align-items center
			color #555555
			transition all 0.3s
			.banner
				position relative
				width 100%
				height 100%
				overflow hidden
				transform translate3d(0, 0, 0)
	.tagTitle
		font-size 35rpx
		font-weight bold
		margin 20rpx
		margin-bottom 10rpx
		color #808080
		display flex
		input
			width 200rpx
			height 50rpx
			border-radius 10rpx
			padding-left 10rpx
			box-sizing border-box
			background #F4F5F6
			margin-left 20rpx
			font-size 26rpx
	.tags
		margin-left 20rpx
		margin-bottom 10rpx
	.iconfont
		display inline-block
		width 75rpx
		height 70rpx
		font-size 40rpx
		line-height 70rpx
		text-align center
	.toolbar
		box-sizing border-box
		height 8vh
		line-height 8vh
		border-bottom 2rpx solid #DFE1E5
		margin-left 20rpx
		.mark
			height 40rpx
			width 2rpx
			background #DFE1E5
			display inline-block
			transform translateY(7.5rpx)
	.ql-container
		box-sizing border-box
		width 750rpx
		min-height calc(84vh - 200rpx)
		height auto
		background #fff
		font-size 30rpx
		line-height 1.5
		padding 20rpx
	.ql-active
		background #FED166
	.editorImg
		display block
</style>
